<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
	    <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jquery.ctp.jslog.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jquery.bgiframe.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		
			<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>	
	
	<script type="text/javascript" src="../../js-debug/ctp/portal/ctp.ui.portal.js"></script>

		
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
		<link href='../../css/skins/blue/ctp-common.css' rel='stylesheet' type='text/css'/>
		<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		
	<style type="text/css">
	.column { width: 170px; float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 5em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 2px dashed blue; visibility: visible !important; width: 150px;height: 100px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
	</style>
	<script type="text/javascript">

	var portal1,panel1,panel2,panel3,panel4,panel5;

	

	 init=function(){	
					portal1=  new ctp.ui.portal({
							id : 'yuli1',			        //portal，默认为portal
							renderTo : 'body',
							porHeight : '150',               //边框高度
							porWidth : '300',                 //边框宽度
							porNum : 5,						//面板总数
							porCol : 3						//顺序位置
					 });		
			panel1=	new ctp.ui.panel({
                    title: 'panel1',
                    collapsible: true,
                    width: '150px',
                    renderTo: 'portlet0'
                }); 
				panel2=	new ctp.ui.panel({
                    title: 'panel2',
                    collapsible: true,
                    width: '150px',
                    height: 'auto',
                    renderTo: 'portlet1'
                }); 
				panel3=	new ctp.ui.panel({
                    title: 'panel3',
                    collapsible: true,
                    width: '150px',
                    height: 'auto',
                    renderTo: 'portlet2'
                }); 
				panel4=	new ctp.ui.panel({
                    title: 'panel4',
                    collapsible: true,
                    width: '150px',
                    height: 'auto',
                    renderTo: 'portlet3'
                }); 
				panel5=	new ctp.ui.panel({
                    title: 'panel5',
                    collapsible: true,
                    width: '150px',
                    height: 'auto',
                    renderTo: 'portlet4'
                }); 
 			 
		};					 
	</script>
</head>
<body onload="init();">
    	<b>ctp.ui.portal实例</b><hr/><br/>
<button onclick ="portal1.initEvent();">初始化</button>		
<button onclick ="portal1.addCol(1);">增加列数</button>
<button onclick ="portal1.saveEvent();">复制风格</button>
<button onclick ="portal1.historyEvent();">读取风格</button>



</body>
</html>
